<template>
    <div class="pay-box">
        <div class="border-s">
            <div class="pay-title">
                支付方式
            </div>
            <div class="pay-type">
                <el-row>
                    <el-col :span="6"><div class="grid-content bg-purple t-a-l">待支付金额：{{info.paid}}元</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light t-a-l">原价{{info.paid + info.discounts}}元<strong>{{info.vipLevel | vipLevel}}优惠{{info.discounts}}元</strong></div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple t-a-l">支付方式：银联</div></el-col>
                    <el-col :span="24"><div class="grid-content bg-purple t-a-l">发票信息(发票说明：请仔细填写开具发票所需信息，一经填写不得更改，我们会按照您填写的内容严格开具发票并尽快快递，发票快递为到付)</div></el-col>
                    <el-col :span="24"><div class="grid-content bg-purple t-a-l">抬头只填写姓名，个人会单位，发票一经开出，不予退换</div></el-col>
                </el-row>
            </div>
        </div>
        <div class="border-s pay-top">
            <div class="pay-title">
                基本信息
            </div>
            <div class="pay-type" v-if="JSON.stringify(info) != '{}'">
                <el-row>
                    <el-col :span="6"><div class="grid-content bg-purple t-a-l">考试科目：{{info.subjects.chName}}</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light t-a-l">考试等级：{{info.subjectsLevel.name}}</div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple t-a-l">培新机构：{{info.organization.companyName}}</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple t-a-l">中文名：{{info.chName}}</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light t-a-l">英文名：{{info.enName}}</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple t-a-l">姓拼音：{{info.pinyinFamilyName}}</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple t-a-l">名拼音：{{info.pinyinName}}</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple t-a-l">GCP编号：{{info.gpcCode}} </div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light t-a-l">GCP会员名：{{info.gpcName}}</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple t-a-l">是否是GCP会员：{{info.gpcUser == 1 ? '是' : '否'}}</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple t-a-l">GCP会员等级： {{info.vipLevel | vipLevel}}</div></el-col>
                </el-row>
            </div>
        </div>
        <div class="border-s pay-top">
            <div class="pay-title">
                发票信息
            </div>
            <div class="pay-type">
                <el-form label-position="right" label-width="180px" :model="formLabelAlign">
                <el-row>
                    <el-col :span="8">
                        <div class="grid-content bg-purple t-a-l">
                            <el-form-item label="公司全称：">
                                <el-input v-model="formLabelAlign.companyName"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple t-a-l">
                            <el-form-item label="开户银行名：">
                                <el-input v-model="formLabelAlign.bankName"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple t-a-l">
                            <el-form-item label="税务编号：">
                                <el-input v-model="formLabelAlign.taxNumber"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple t-a-l">
                            <el-form-item label="开户银行账号：">
                                <el-input v-model="formLabelAlign.bankAccount"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple t-a-l">
                            <el-form-item label="企业类别：">
                                <el-select v-model="formLabelAlign.companyCategory" placeholder="请选择">
                                    <el-option v-for="item in corporationTypeArr" :key="item" :label="item" :value="item"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple t-a-l">
                            <el-form-item label="发票科目：">
                                <el-select v-model="formLabelAlign.taxCategory" placeholder="请选择">
                                    <el-option label="鉴证资讯类" value="鉴证资讯类"></el-option>
                                    <el-option label="生活服务类" value="生活服务类"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple t-a-l">
                            <el-form-item label="纳税人识别号：">
                                <el-input v-model="formLabelAlign.taxpayerNumber"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple t-a-l">
                            <el-form-item label="发票科目细类：">
                                <el-select v-model="formLabelAlign.taxCategoryDetail" placeholder="请选择">
                                    <el-option label="培训费" value="培训费"></el-option>
                                    <el-option label="会议费" value="咨询费"></el-option>
                                    <el-option label="咨询费" value="咨询费"></el-option>
                                    <el-option label="资料费" value="资料费"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple t-a-l">
                            <el-form-item label="公司地址：">
                                <el-input v-model="formLabelAlign.companyAddress"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple t-a-l">
                            <el-form-item label="固定电话：">
                                <el-input v-model="formLabelAlign.telephone"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                </el-form>
            </div>
        </div>
        <el-button class="go-pay" @click="goPay()">立即提交</el-button>
    </div>
</template>
<script>
import apiHttp from '../../../api/index.js'
export default {
    data(){
        return{
            formLabelAlign:{
                orderId:''
            },
            info:{},
            corporationTypeArr:['国企','外企','民企','国家机关','事业单位','社会团体','个体','其他'],
        }
    },
    filters:{
        vipLevel(val){
            if(val == 0){
                return '普通会员'
            }else if(val == 1){
                return '一年会员' 
            }else{
                return '终生会员'
            }
        }
    },
    mounted(){
        this.detail()
    },
    methods:{
        goPay(){
            apiHttp.apiIndex.examOrderPay(this.formLabelAlign).then(resp=>{
                if(resp.code == 0){
                    const div = document.createElement('div') // 创建div
                    div.innerHTML = resp.data // 将返回的form 放入div
                    document.body.appendChild(div)
                    document.getElementById('pay_form').submit()
                }else{

                }
            })
            // this.$router.push({
            //     path:'/students/myTest'
            // })
        },
        detail(){
            apiHttp.apiIndex.orderDetail(this.$route.query.id).then(resp=>{
                if(resp.code == 0){
                    this.info = resp.data
                    this.formLabelAlign.orderId = this.info.id
                }
            })
        }
    }
}
</script>

<style lang="less">
.pay-box{
    .pay-top{
        margin-top: 20px;
    }
    .pay-title{
        height: 40px;
        background-color: #5d2805;
        color: #fff;
        font-size: 18px;
        line-height: 40px;
        font-weight: bold;
        text-align: left;
        padding-left: 30px;
    }
    .pay-type{
        padding: 15px 30px;
        strong{
            padding-left: 20px;
        }
        .grid-content{
            height: 40px;
            line-height: 40px;
            margin-bottom: 10px;
            .el-form-item__label{
                color: #000;
            }
            .el-input{
                width: 70%;
            }
        }
    }
    .go-pay{
        margin-top: 30px;
        background-color: #5d2805;
        color: #fff;
        border-color: #5d2805;
        cursor: pointer;
        font-size: 16px;
    }
}
</style>

